import React, { Component } from "react";
import { Switch, Route, Redirect } from 'react-router-dom'
import Cookies from "js-cookie";
import { connect } from 'react-redux'
import { NavBar } from 'antd-mobile'
import LaobanInfo from "../laoban-info/laoban-info";
import DashenInfo from "../dashen-info/dashen-info";
import Laoban from "../laoban/laoban";
import Dashen from "../dashen/dashen";
import Message from "../message/message";
import Personal from "../personal/personal";
import NotFound from "../../components/not-found/not-found";
import NavFooter from "../../components/nav-footer/nav-footer";
import Chat from "../chat/chat";
import { getUser } from "../../redux/actions";
import { getRedirectTo } from "../../utils";
class Main extends Component {
    // 给组件对象添加属性
    navList = [ // 包含所有导航组件的相关信息数据
        {
            path: '/laoban', // 路由路径
            component: Laoban,
            title: '大神列表',
            icon: 'dashen',
            text: '大神',
        },
        {
            path: '/dashen', // 路由路径
            component: Dashen,
            title: '老板列表',
            icon: 'laoban',
            text: '老板',
        },
        {
            path: '/message', // 路由路径
            component: Message,
            title: '消息列表',
            icon: 'message',
            text: '消息',
        },
        {
            path: '/personal', // 路由路径
            component: Personal,
            title: '用户中心',
            icon: 'personal',
            text: '个人',
        }
    ]
    componentDidMount() {
        // cookie中有userid
        // redux中的user是空对象
        const userid = Cookies.get('userid')
        const { user } = this.props
        if (userid && !user._id) {
            this.props.getUser()
        }
    }
    render() {
        const { navList } = this
        // 得到当前请求路径
        const path = this.props.location.pathname
        // 判断用户是否已经登录过（cookie中的userid是否有值）
        const userid = Cookies.get('userid')
        // 如果浏览器没有保存userid的cookie，直接跳转到login
        if (!userid) {
            this.props.history.replace('/login')
        }
        // cookie中有userid
        // redux中的user是否有数据
        const { user } = this.props
        if (!user._id) {
            return null //不做任何显示
        } else {
            // 请求根路径时，自动跳转到对应的用户主界面
            if (path === '/') {
                const path = getRedirectTo(user.type, user.header)
                return <Redirect to={path} />
            }
            // 指定哪个nav应该被隐藏
            if (user.type === 'laoban') {
                this.navList[1].hide = true
            } else {
                this.navList[0].hide = true
            }
        }
        // 得到当前nav
        const currentNav = this.navList.find(nav => nav.path === path)
        // 得到props中的unReadCount
        const unReadCount = this.props.unReadCount
        return (
            <div>
                {currentNav ? <NavBar className='sticky-header'>{currentNav.title}</NavBar> : null}
                <Switch>
                    {
                        navList.map(nav => <Route key={nav.path} path={nav.path} component={nav.component} />)
                    }
                    <Route path='/laobaninfo' component={LaobanInfo} />
                    <Route path='/dasheninfo' component={DashenInfo} />
                    <Route path='/chat/:userid' component={Chat} />

                    <Route component={NotFound} />
                </Switch>
                {currentNav ? <NavFooter navList={navList} unReadCount={unReadCount} /> : null}
            </div>
        )
    }
}
export default connect(
    state => ({
        user: state.user,
        unReadCount: state.chat.unReadCount
    }),
    { getUser }
)(Main)